<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link rel="stylesheet" href="<c:url value='/resource/js/app/jquery-validation/1.11.0/jquery.validate.css'/>">
<input type="hidden" id="s1" value="${usr.province==null?"":usr.province}" />
<input type="hidden" id="s2" value="${usr.city==null?"":usr.city}" />
<input type="hidden" id="s3" value="${usr.area==null?"":usr.area}" />
<c:if test="${qy!=''}" >
<input type="hidden" id="s4" value="${qy.province==null?"":qy.province}" />
<input type="hidden" id="s5" value="${qy.city==null?"":qy.city}" />
<input type="hidden" id="s6" value="${qy.area==null?"":qy.area}" />
</c:if>
<div class="ucr-centent user-info marginTop60">
    <h3 class="ucr-title">信息资料</h3>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#pers" role="tab" data-toggle="tab">个人信息</a></li>
<c:if test="${qy!=''}" >
        <li><a href="#company" role="tab" data-toggle="tab">企业信息</a></li>
    </c:if>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="pers">
            <form id="gr" class="form-horizontal" role="form">
                <div class="form-group">
                    <label class="col-sm-2 control-label">当前头像：</label>
                    <div class="col-sm-10">
                        <div class="avater">
                            <div class="avater-default">
                                <c:choose>
                                    <c:when test="${pic==''}">
                                    <img id="headimg" src='<c:url value="/resource/images/avater_default.jpg" />' /></div>
                                    </c:when>
                                    <c:otherwise>
                                    <img id="headimg" src="data:image/png;base64,${pic}" /></div>
                                    </c:otherwise>
                                </c:choose>


                            <div class="avater-info">
                                <p>选择本地照片，上传编辑自己的头像</p>
                                <a href="javascript:void(0);" class="file_a" onclick="applyfileupload('fileUpload');">编辑头像 <input id="fileUpload" name="materialFile" type="file" value=""></a>

                                <span>（头像大小：100*100像素，支持jpg、jpeg、gif、png、bmp格式的图片）</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">手机号码：</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="acountId"  readonly="true" value="${usr.acountId}" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">真实姓名：</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" readonly="true" id="realName" value="${usr.realName}" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">身份证号：</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" readonly="true" id="idNum" value="${usr.idNum}" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">固定电话：</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="telephone" name="telephone" value="${usr.telephone}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">电子邮件：</label>
                    <div class="col-sm-6">
                        <input type="email" class="form-control" id="email" name="email"  value="${usr.email}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">联系地址：</label>
                    <div class="col-sm-3">
                        <select class="form-control"  id="province" name="province">

                        </select>
                    </div>
                    <div class="col-sm-3">
                        <select class="form-control"  id="city" name="city">

                        </select>
                    </div>
                    <div class="col-sm-3">
                        <select class="form-control"  id="area" name="area">

                        </select>
                    </div>
                    <div class="col-sm-9 col-xs-offset-2" style="margin-top: 15px;">
                        <input type="text" class="form-control" placeholder="详细地址" id="address" name="address" value="${usr.address}">
                    </div>
                </div>
                <div class="btn-box">
                    <intput id="saveUser" onclick="return saveUser()" class="btn btn-blue btn-lg">保存</intput>
                </div>
            </form>
        </div>
    <c:if test="${qy!=''}" >
        <div class="tab-pane" id="company">
            <form id="qy" class="form-horizontal" role="form">


                <div class="form-group">
                    <label class="col-sm-2 control-label">企业名称：</label>
                    <div class="col-sm-6">
                        <input type="text" readonly="true" class="form-control" value="${qy.compname}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">机构代码：</label>
                    <div class="col-sm-6">
                        <input type="text" readonly="true" class="form-control" value="${qy.compcode}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">企业电话：</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" value="${qy.compphone}" name="compphone" id="compphone">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">公司邮箱：</label>
                    <div class="col-sm-6">
                        <input type="email" class="form-control" value="${qy.compemail}" name="compemail" id="compemail">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">联系地址：</label>
                    <div class="col-sm-3">
                        <select class="form-control" id="province2" name="province">

                        </select>
                    </div>
                    <div class="col-sm-3">
                        <select class="form-control" id="city2" name="city">

                        </select>
                    </div>
                    <div class="col-sm-3">
                        <select class="form-control" id="area2" name="area">

                        </select>
                    </div>
                    <div class="col-sm-9 col-xs-offset-2" style="margin-top: 15px;">
                        <input type="text" class="form-control" placeholder="详细地址" value="${qy.adderss}" name="adderss" id="adderss">
                    </div>
                </div>
                <div class="btn-box">
                    <intput id="saveQy" onclick="return saveQy()" class="btn btn-blue btn-lg">保存</intput>
                </div>
            </form>
        </div>
    </c:if>
    </div>
</div>
<script src='<c:url value="/resource/js/jquery.metadata.js" />' ></script>
<script>



    $(function(){
        var xmlPath = '<c:url value="/resource/Area.xml" />';
        var pro = $("#s1").val();
        var city = $("#s2").val();
        var area = $("#s3").val();
        //加载省份城市级联
        loadProvince(xmlPath, pro, city, area);


        var pro1 = $("#s4").val();
        var city1 = $("#s5").val();
        var area1 = $("#s6").val();
        //加载省份城市级联
        loadProvince2(xmlPath, pro1, city1, area1);



    });


    function saveUser()
    {


        $.ajax({
            url: '<c:url value="/members/user"></c:url>',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify($('#gr').serializeObject()),
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (data) {
                if(data.succ==true)
                        toast('保存成功！')
                else
                        toast('保存失败！')
                //console.log(data);

            },
            error: function (data) {
                //alert("提交失败");
            }
        });
        return false;
    }

    function saveQy()
    {


        $.ajax({
            url: '<c:url value="/members/comp"></c:url>',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify($('#qy').serializeObject()),
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (data) {
                if(data.succ==true)
                    toast('保存成功！')
                else
                    toast('保存失败！')

            },
            error: function (data) {
                //alert("提交失败");
            }
        });
        return false;
    }

    function applyfileupload(manifestGuid) {
        //alert(manifestGuid);
        $("#" + manifestGuid).fileupload({
            url: '<c:url value="/members/pic/att"/>',
            dataType: 'json',
            done: function (e, d) {

                resp = eval(d.result.data);
                $('#headimg').attr("src","data:image/png;base64,"+resp.data);
                $('#rndpic').attr("src","data:image/png;base64,"+resp.data);



            }
        });
    }
    function loadProvince(path,pro,city,area) {
        var xmlDoc = null;

        xmlDoc = jQuery.get(path, function (date) {


            var $s1 = $("#province",$('#gr'));
            var $s2 = $("#city",$('#gr'));
            var $s3 = $("#area",$('#gr'));
            var v1 = pro;
            var v2 = city;
            var v3 = area;
            var root = jQuery(date).find("address")[0];

            $(root).children("province").each(function () {

                appendOptionTo($s1, $(this).attr("name"), $(this).attr("name"), v1);
            });
            $s1.change(function () {
                $s2.html("");
                var province_node = $(root).children("province")[this.selectedIndex];
                $(province_node).children("city").each(function () {
                    appendOptionTo($s2, $(this).attr("name"), $(this).attr("name"), v2);
                });
                $s2.change();
            }).change();
            $s2.change(function () {
                $s3.html("");
                var province_node = $(root).children("province")[$s1[0].selectedIndex];
                var city_node = $(province_node).children("city")[this.selectedIndex];
                $(city_node).children("country").each(function () {
                    appendOptionTo($s3, $(this).attr("name"), $(this).attr("name"), v3)
                });
            }).change();
            function appendOptionTo($o, k, v, d) {
                var $opt = $("<option>").text(k).val(v);
                if (v == d) { $opt.attr("selected", "selected") }
                $opt.appendTo($o);
            }
        });
    }

    function loadProvince2(path,pro,city,area) {
        var xmlDoc = null;

        xmlDoc = jQuery.get(path, function (date) {


            var $s1 = $("#province2",$('#qy'));
            var $s2 = $("#city2",$('#qy'));
            var $s3 = $("#area2",$('#qy'));
            var v1 = pro;
            var v2 = city;
            var v3 = area;
            var root = jQuery(date).find("address")[0];

            $(root).children("province").each(function () {

                appendOptionTo($s1, $(this).attr("name"), $(this).attr("name"), v1);
            });
            $s1.change(function () {
                $s2.html("");
                var province_node = $(root).children("province")[this.selectedIndex];
                $(province_node).children("city").each(function () {
                    appendOptionTo($s2, $(this).attr("name"), $(this).attr("name"), v2);
                });
                $s2.change();
            }).change();
            $s2.change(function () {
                $s3.html("");
                var province_node = $(root).children("province")[$s1[0].selectedIndex];
                var city_node = $(province_node).children("city")[this.selectedIndex];
                $(city_node).children("country").each(function () {
                    appendOptionTo($s3, $(this).attr("name"), $(this).attr("name"), v3)
                });
            }).change();
            function appendOptionTo($o, k, v, d) {
                var $opt = $("<option>").text(k).val(v);
                if (v == d) { $opt.attr("selected", "selected") }
                $opt.appendTo($o);
            }
        });
    }
</script>
